<script setup>
import previews from "./Preview.vue";

const props = defineProps({
  isShowPpoup: Boolean,
  dataURL: String,
  doubleBorder: Boolean,
  titleCont: String,
  ioTitle: String,
  titleColor: String,
});

const emit = defineEmits(["hidePopup"]);

const dialogVisible = ref(props.isShowPpoup);
// form表单数据
const popupForm = ref({
  size: "a5",
  width: {
    value: "",
    unit: "",
  },
  height: {
    value: "",
    unit: "",
  },
  resolution: {
    value: "",
    unit: "",
  },
});

const handleClose = () => {
  emit("hidePopup");
};
const preview = () => {
  dialog.value = true;
};

// 出图
const print = () => {
  //   this.$parent.printDrawing(this.popupForm.size, "300", this.$props);
};
const base64 = ref("");
const dialog = ref(false);
</script>
<template>
  <div class="container-popup">
    <el-dialog
      :show-close="false"
      top="0"
      title="制图设置"
      v-model="dialogVisible"
      :before-close="handleClose"
    >
      <div class="popup-content">
        <el-form :model="popupForm" label-width="80px">
          <el-form-item label="大小">
            <el-select v-model="popupForm.size" style="width: 100%">
              <el-option label="A5" value="a5"></el-option>
              <el-option label="A4" value="a4"></el-option>
              <el-option label="A3" value="a3"></el-option>
              <el-option label="A2" value="a2"></el-option>
              <el-option label="A1" value="a1"></el-option>
              <el-option label="A0" value="a0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input v-model="popupForm.width.value">
              <template #append>厘米</template>
            </el-input>
          </el-form-item>
          <el-form-item label="高度">
            <el-input v-model="popupForm.height.value">
              <template #append>厘米</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="preview">预览</el-button>
          <el-button type="primary" @click="print">导出</el-button>
        </span>
      </template>
    </el-dialog>
    <previews
      :dialog="dialog"
      :url="dataURL"
      :doubleBorder="doubleBorder"
      :ioTitle="ioTitle"
      :titleCont="titleCont"
      :titleColor="titleColor"
      @hidden="dialog = false"
    ></previews>
  </div>
</template> 
<style lang="scss" scoped>
.container-popup {
  position: absolute;
  width: 100%;
  height: 100%;
  .popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 454px;
    height: 578px;
    padding: 44px 66px 60px 46px;
    background-color: #fff;
    border-radius: 6px;
    box-sizing: border-box;
  }
  :depp .el-dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 500px;
    padding: 21px 21px 50px 21px;
    border-radius: 6px;
    box-sizing: border-box;
    margin-bottom: 0;
    .el-dialog__title {
      font-family: PingFangSC-Regular;
      font-size: 24px;
      color: #2b2b2b;
      letter-spacing: 0;
    }
    .el-dialog__header {
      padding-bottom: 0;
    }
    .el-dialog__footer {
      width: 100%;
      padding: 0 0;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      text-align: center;
      .el-button {
        width: 166px;
        height: 58px;
      }
      .el-button--default {
        border: 1px solid #409eff;
      }
    }
  }
}
.container-popup :depp .el-dialog .el-dialog__header :depp .el-form-item__label,
.container-popup :depp .el-dialog .el-dialog__body :depp .el-form-item__label {
  text-align: center;
  width: 50px;
}
.container-popup
  :depp
  .el-dialog
  .el-dialog__header
  :depp
  .el-form-item__content,
.container-popup
  :depp
  .el-dialog
  .el-dialog__body
  :depp
  .el-form-item__content {
  margin-left: 50px;
  display: flex;
  justify-content: space-between;
}
.container-popup :depp .el-dialog .el-dialog__header .el-form-item,
.container-popup :depp .el-dialog .el-dialog__body .el-form-item {
  width: 100%;
}
.container-popup :depp .el-dialog .el-dialog__header .el-form-item .el-input,
.container-popup :depp .el-dialog .el-dialog__body .el-form-item .el-input {
  margin-right: 10px;
}
.container-popup
  :depp
  .el-dialog
  .el-dialog__header
  .el-form-item
  .el-input__inner,
.container-popup
  :depp
  .el-dialog
  .el-dialog__body
  .el-form-item
  .el-input__inner {
  height: 46px;
  padding: 0 15px;
}
.container-popup
  :depp
  .el-dialog
  .el-dialog__header
  .el-form-item
  .el-input__suffix,
.container-popup
  :depp
  .el-dialog
  .el-dialog__body
  .el-form-item
  .el-input__suffix {
  right: 10px;
}
.container-popup
  :depp
  .el-dialog
  .el-dialog__header
  .el-form-item
  .el-form-item__label,
.container-popup
  :depp
  .el-dialog
  .el-dialog__body
  .el-form-item
  .el-form-item__label {
  line-height: 46px;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #838383;
  letter-spacing: 0;
}
.container-popup
  :depp
  .el-dialog
  .el-dialog__header
  .el-form-item
  .el-input--mini,
.container-popup
  :depp
  .el-dialog
  .el-dialog__body
  .el-form-item
  .el-input--mini {
  width: 150px;
}
.container-popup
  :depp
  .el-dialog
  .el-dialog__header
  .el-form-item
  .el-select
  .el-input--mini,
.container-popup
  :depp
  .el-dialog
  .el-dialog__body
  .el-form-item
  .el-select
  .el-input--mini {
  width: 110px;
}
.container-popup
  :depp
  .el-dialog
  .el-dialog__header
  .el-form-item
  .el-select:nth-child(1)
  .el-input,
.container-popup
  :depp
  .el-dialog
  .el-dialog__body
  .el-form-item
  .el-select:nth-child(1)
  .el-input {
  width: 100%;
}
.container-popup :depp .el-dialog .el-dialog__header .content,
.container-popup :depp .el-dialog .el-dialog__body .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 15px;
  font-family: PingFangSC-Regular;
  font-size: 18px;
  color: #838383;
  letter-spacing: 0;
  margin-top: 6px;
}
.container-popup :depp .el-dialog .el-dialog__header .content span,
.container-popup :depp .el-dialog .el-dialog__body .content span {
  display: inline-block;
}
.container-popup :depp .el-dialog .el-dialog__header .content .left,
.container-popup :depp .el-dialog .el-dialog__body .content .left,
.container-popup :depp .el-dialog .el-dialog__header .content .right,
.container-popup :depp .el-dialog .el-dialog__body .content .right {
  height: 24px;
  display: flex;
  align-items: center;
}
.container-popup :depp .el-dialog .el-dialog__header .content .level,
.container-popup :depp .el-dialog .el-dialog__body .content .level,
.container-popup :depp .el-dialog .el-dialog__header .content .bgc,
.container-popup :depp .el-dialog .el-dialog__body .content .bgc {
  margin-right: 20px;
}
.container-popup :depp .el-dialog .el-dialog__header .content .bgc + span,
.container-popup :depp .el-dialog .el-dialog__body .content .bgc + span {
  width: 38px;
  height: 24px;
  border-radius: 4px;
  background-color: #5e77ef;
}
</style>